<template>
  <a-modal
    :visible="modalVisible"
    :title="handType == 'examine' ? $t('all.autotext38'): $t('all.autotext568')"
    width="50%"
    :footer="null"
    @cancel="handleCancel"
    v-if="originData"
  >
    <div>
      <div class="titleView">
        {{ $t('all.autotext1389') }}<div class="state">{{ form.status | enumValueByKey($const.AUDGET_STATUS) }}</div>
      </div>
      <div class="conentView" v-if="viewType==='adjustBudget'">
        <div class="conentView-item">
          <div class="conentView-item-label">{{ $t('all.autotext1658') }}:</div>
          <div>{{ Number(form.studyAmount).toFixed(2) }}</div>
        </div>
        <div class="conentView-item">
          <div class="conentView-item-label">{{ $t('all.autotext1659') }}:</div>
          <div>{{ Number(form.serverAmount).toFixed(2) }}</div>
        </div>
        <div class="conentView-item">
          <div class="conentView-item-label">{{ $t('all.autotext1660') }}:</div>
          <div>{{ Number(form.budgetAmount).toFixed(2) }}</div>
        </div>
        <div class="conentView-item">
          <div class="conentView-item-label">{{ $t('all.autotext1661') }}:</div>
          <div>{{ Number(originData.totalBudget).toFixed(2) }}</div>
        </div>
        <div class="conentView-item">
          <div class="conentView-item-label">{{ $t('all.autotext1662') }}:</div>
          <div>{{ Number(afterBudgt).toFixed(2) }}</div>
        </div>
        <div class="conentView-item">
          <div class="conentView-item-label">{{ $t('all.autotext1076') }}:</div>
          <div>{{ form.applyRole }} - {{ form.applyAccount }}</div>
        </div>
        <div class="conentView-item">
          <div class="conentView-item-label">{{ $t('all.autotext244') }}:</div>
          <div>{{ form.createTime | moment() }}</div>
        </div>
      </div>
      <div class="conentView" v-else>
        <!-- <div class="conentView-item">
          <div class="conentView-item-label">{{ $t('all.autotext456') }}:</div>
          <div>{{ Number(form.budgetAmount).toFixed(2) }}</div>
        </div> -->
        <div class="conentView-item">
          <div class="conentView-item-label">{{ $t('all.autotext1757') }}:</div>
          <div>{{ Number(form.studyAmount).toFixed(2) }}{{ $t('all.autotext811') }}</div>
        </div>
        <div class="conentView-item">
          <div class="conentView-item-label">{{ $t('all.autotext1758') }}:</div>
          <div>{{ Number(form.serverAmount).toFixed(2) }}{{ $t('all.autotext811') }}</div>
        </div>
        <div class="conentView-item">
          <div class="conentView-item-label">{{ $t('all.autotext1759') }}:</div>
          <div>{{ Number(form.studyAmount + form.serverAmount).toFixed(2) }}{{ $t('all.autotext811') }}</div>
        </div>
        <div class="conentView-item" v-if="form.status === 0">
          <div class="conentView-item-label">{{ $t('all.autotext1760') }}:</div>
          <div>{{ Number(form.afterTotalAmount).toFixed(2) }}{{ $t('all.autotext811') }}</div>
        </div>
        <div class="tip" v-if="isAudit && classify === 1">
          <span v-if="advancedPay">提示：当前垫付项目可分配金额为</span>
          <span v-else>{{ $t('all.autotext1756') }}</span>
         {{ originData.distributableAmount || 0 }}{{ $t('all.autotext811') }}</div>
        <div class="conentView-item" v-if="form.payTime">
          <div class="conentView-item-label">{{ $t('all.autotext3') }}:</div>
          <div>{{ form.payTime | moment() }}</div>
        </div>
        <div class="conentView-item" v-if="form.payNo">
          <div class="conentView-item-label">{{ $t('all.autotext944') }}:</div>
          <div>{{ form.payNo }}</div>
        </div>
        <div class="conentView-item" v-if="form.proofUrl">
          <div class="conentView-item-label">{{ $t('all.autotext441') }}:</div>
          <img :src="form.proofUrl | dealImageUrl" @click="privew(form.proofUrl)" style="width: 40%;cursor: pointer;" >
        </div>
        <div class="conentView-item">
          <div class="conentView-item-label">{{ $t('all.autotext1076') }}:</div>
          <div>{{ form.applyRole }} - {{ form.applyAccount }}</div>
        </div>
        <div class="conentView-item">
          <div class="conentView-item-label">{{ $t('all.autotext244') }}:</div>
          <div>{{ form.createTime | moment() }}</div>
        </div>
        <div v-if="!isAudit && form.status != 0" class="conentView-item">
          <div class="conentView-item-label">{{ $t('all.autotext899') }}:</div>
          <div>{{ form.processorRole }} - {{ form.processAccount }}</div>
        </div>
        <div v-if="!isAudit && form.status != 0" class="conentView-item">
          <div class="conentView-item-label">{{ $t('all.autotext1208') }}:</div>
          <div>{{ form.status | enumValueByKey($const.AUDGET_STATUS) }}</div>
        </div>
        <div
          v-if="!isAudit && form.refuseReason && form.status != 0"
          class="conentView-item"
        >
          <div class="conentView-item-label">{{ $t('all.autotext102') }}:</div>
          <div>{{ form.refuseReason }}</div>
        </div>
        <div v-if="!isAudit && form.status == 0" class="conentView-item">
          <div class="conentView-item-label">{{ $t('all.autotext1158') }}:</div>
          <div>{{ form.status | enumValueByKey($const.AUDGET_STATUS) }}</div>
        </div>
      </div>
      <div class="bottomView">
        <a-space>
          <a-button v-if="!isAudit" type="primary" @click="handleCancel">
            {{ $t('all.autotext76') }}
          </a-button>
          <a-button
            v-if="isAudit"
            type="primary"
            :loading="loading"
            @click="budgetAudit(1,'')"
          >
            {{ $t('all.autotext238') }}
          </a-button>
          <a-button
            v-if="isAudit"
            type="danger"
            :loading="loading"
            @click="showReufed"
          >
            {{ $t('all.autotext515') }}
          </a-button>
        </a-space>
      </div>
      <a-modal
        :visible="remarkVisible"
        :title="$t('all.autotext434')"
        width="30%"
        @ok="submitReufed"
        @cancel="remarkVisible = false"
      >
        <a-textarea v-model="remark" :placeholder="$t('all.autotext958')" :auto-size="{ minRows: 3}"/>
      </a-modal>
    </div>
  </a-modal>
</template>
<script>
import { budgetDetail, budgetReview, detailForAdjust } from '@/api/overview/budget'
export default {
  props: {
    isAudit: { // 是否是审核
      type: Boolean,
      default: false
    },
    viewType: {
      type: String,
      default: ''
    },
    handType: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      modalVisible: false,
      remarkVisible: false,
      remark: '',
      form: {},
      loading: false,
      originData: {},
      classify: '',
      advancedPay: 0
    }
  },
  computed: {
    afterBudgt () {
      return (Number(this.originData.totalBudget) + Number(this.form.budgetAmount)).toFixed(2)
    }
  },

  methods: {
    open (todoId, proId, classify) {
    this.advancedPay = sessionStorage.getItem('advancedPay') || 0
      this.modalVisible = true
      this.getDetail(todoId)
      this.detailForAdjust(proId)
      this.classify = classify || this.$store.state.user.project.classify
    },
    getDetail (id) {
      budgetDetail({ id: id }).then(res => {
        this.form = res
      })
    },
    // 获取弹框默认值
    async detailForAdjust (proId) {
      const res = await detailForAdjust({ proId: proId || localStorage.getItem('CURRENT_PROID') })
      this.originData = res
      for (let key in this.originData) {
        if (!this.originData[key]) {
          this.originData[key] = 0
        }
      }
    },
    privew (img) {
      window.open(this.$options.filters.dealImageUrl(img), '_blank')
    },
    budgetAudit (status, refuseReason) {
      this.loading = true
      let oldkey = Object.keys(this.$const.AUDGET_STATUS).find(item => this.$const.AUDGET_STATUS[item].value === this.form.status)
      let newkey = Object.keys(this.$const.AUDGET_STATUS).find(item => this.$const.AUDGET_STATUS[item].value === status)
      budgetReview({
        id: this.form.id,
        status: status,
        refuseReason: refuseReason,
        budgetAmount: this.form.budgetAmount,
        serverAmount: this.form.serverAmount,
        studyAmount: this.form.studyAmount,
        oldstatusDesc: this.$const.AUDGET_STATUS[oldkey].desc,
        statusDesc: this.$const.AUDGET_STATUS[newkey].desc
      }).then(res => {
        this.$message.success(this.$t('all.autotext510'))
        this.handleOk()
      }).finally(() => {
        this.loading = false
      })
    },
    showReufed () {
      this.remarkVisible = true
      this.remark = ''
    },
    submitReufed () {
      if (!this.remark) {
        this.$message.error(this.$t('all.autotext653'))
        return
      }
      this.budgetAudit(2, this.remark)
    },
    handleCancel () {
      this.form = {}
      this.remarkVisible = false
      this.modalVisible = false
    },
    handleOk () {
      this.remarkVisible = false
      this.modalVisible = false
      this.$emit('handleOk')
    }
  }
}
</script>
<style lang="less" scoped>
  .titleView{
    border-left: 5px solid #3d92ff;
    padding-left: 10px;
    font-size: 17px;
    font-weight: 550;
    color: #000;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .state{
      margin-left: 20px;
      font-size: 14px;
      font-weight: 500;
      color: #f59A23;
      // width: 70px;
      padding:0 8px;
      height: 30px;
      line-height: 30px;
      border: 1px solid #f59A23;
      border-radius: 20px;
      text-align: center;
    }
  }
  .conentView{
    &-item{
      display: flex;
      margin-bottom: 15px;
      font-size: 15px;
      &-label{
        // min-width: 60px;
        // text-align: right;
        text-align: left;
        margin-right: 10px;
      }
    }
  }
  .bottomView{
    margin-top: 20px;
    display: flex;
  }
  .tip {
    margin-bottom: 10px;
  }
</style>
